<script setup lang="ts">
import { useIntervalFn } from "@vueuse/core";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  aiCenterImg
  // aiCircleRedImg,
  // aiCircleBlueImg,
  // aiLijieImg,
  // aiYihuoImg,
} from "./imgBase64";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "250px"
  }
});

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  // return isDark.value ? "dark" : "default";
  return "dark";
});

const wordsCloudChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, resize } = useECharts(
  wordsCloudChartRef as Ref<HTMLDivElement>,
  { theme }
);

setTimeout(() => {
  initChart();
}, 500);

const initChart = () => {
  const chartScatter = getInstance();
  const data = [
    {
      fixed: true,
      x: chartScatter.getWidth() / 2,
      y: chartScatter.getHeight() / 2,
      name: "xss攻击",
      label: {
        show: true,
        position: [45, 20],
        color: "#fff",
        fontWeight: 800,
        fontSize: 28
      },
      symbolSize: 150,
      symbol: aiCenterImg
    },
    {
      name: "SQL注入",
      label: {
        show: true,
        position: "top",
        color: "#f1f1f1",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 23,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#19fcff"
            },
            {
              offset: 1,
              color: "#0096ff"
            }
          ]
        },
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#362ffa",
        shadowBlur: 15
      }
    },
    {
      name: "弱口令",
      label: {
        show: true,
        position: "top",
        color: "rgba(241,241,241,0.4)",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 15,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#0e89fc"
            },
            {
              offset: 1,
              color: "#0d10ed"
            }
          ]
        },
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#362ffa",
        shadowBlur: 15
      }
    },
    {
      name: "CSRF",
      label: {
        show: true,
        position: "top",
        color: "rgba(241,241,241,0.4)",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 15,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#19fcff"
            },
            {
              offset: 1,
              color: "#0096ff"
            }
          ]
        },
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#362ffa",
        shadowBlur: 15
      }
    },
    {
      name: "脚本",
      label: {
        show: true,
        position: "top",
        color: "rgba(241,241,241,0.4)",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 15,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#0e89fc"
            },
            {
              offset: 1,
              color: "#0d10ed"
            }
          ]
        },
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#362ffa",
        shadowBlur: 15
      }
    },
    {
      name: "端口",
      label: {
        show: true,
        position: "top",
        color: "#f1f1f1",
        fontWeight: 800,
        fontSize: 12
      },
      symbolSize: 15,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#0e89fc"
            },
            {
              offset: 1,
              color: "#0d10ed"
            }
          ]
        },
        // shadowColor: "rgba(255, 255, 255, 0.7)",
        shadowColor: "#362ffa",
        shadowBlur: 15
      }
    }
  ];
  setOptions({
    title: {
      text: "网安词云",
      textStyle: {
        fontSize: 15,
        color: "#2fdbbb",
        fontWeight: "normal"
      }
    },
    // tooltip: {},
    series: [
      {
        type: "graph",
        layout: "force",
        // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
        // 'circular' 采用环形布局，见示例 Les Miserables，布局相关的配置项见 graph.circular
        // 'force' 采用力引导布局，见示例 Force，布局相关的配置项见 graph.force
        animation: false,
        data,
        force: {
          // initLayout: 'circular'
          // gravity: 0
          // 节点之间的斥力因子。
          repulsion: 170 // 300
          // edgeLength: 10	// 边的两个节点之间的距离，这个距离也会受 repulsion
        }
      }
    ]
  });
};

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="wordsCloudChartRef" :style="{ height, width }" />
</template>
